<%--
  Created by IntelliJ IDEA.
  User: hz
  Date: 2024/7/21
  Time: 0:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
  <title>Title</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/layui-v2.9.0/layui/css/layui.css" media="all">
  <script src="/layui-v2.9.0/layui/layui.js"></script>
</head>
<body>
<div style="width: 1380px">

    <div class="layui-col-xs10 layui-col-xs-offset1">

        <ul class="layui-nav layui-bg-gray">
            <li class="layui-nav-item left-nav layui-col-xs2">
                <!-- 品牌logo位置 -->
                <div class="nav-profile">
                    <!-- 图像使用div包裹，设置相对定位 -->
                    <div class="nav-profile-img" style="margin-left: 20px;">
                        <img class="logo_img" src="/img/热趣部落.png" style="transform: scale(1.5);" alt="加载中"/>
                    </div>
                    <!-- 用户名链接 -->
                    <a href="/forward/indexPage" style="color: black;">热趣部落</a>
                </div>
            </li>
            <li class="layui-nav-item layui-this layui-col-xs1"><a href="/forward/indexPage">首页</a></li>
            <li class="layui-nav-item layui-col-xs1"><a href="">热点</a></li>
            <li class="layui-nav-item layui-col-xs1">
                <a href="javascript:;">模块</a>
                <dl class="layui-nav-child">
                    <dd><a href="">趣点模块</a></dd>
                    <dd><a href="">动态模块</a></dd>
                    <dd><a href="">个人信息模块</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item "><a href="">关于</a></li>
            <!--            个人信息接口-->
            <li class="layui-nav-item layui-col-xs2" style="float: right">
                <div class="nav-profile">
                    <div class="nav-profile-img" style="margin-left: 20px;">
                        <img class="layui-nav-img" src="${sessionScope.user.upictureurl}" style="transform: scale(1.5);" alt="加载中"/>
                    </div>
                    <!-- 用户名链接 -->
                    <a href="javascript:;" style="color: black;">${sessionScope.user.uname}</a>
                    <dl class="layui-nav-child" style="text-align: center">
                        <dd><a href="">个人信息</a></dd>
                        <dd><a href="">我的好友</a></dd>
                        <dd >
                            <div >
                                <a href="/logout/user"> <i class="layui-icon layui-icon-logout"></i> 退出登录</a>
                            </div>
                        </dd>
                    </dl>
                </div>
            </li>
        </ul>
    </div>


  <div class="layui-col-xs10 layui-col-lg-offset1  " style="height: auto">
    <div class="layui-panel ">
      <div style="padding: 32px;display: flex" class="layui-col-xs12 ">
        <img src="${requestScope.bar.bimageurl}" style="transform: scale(2); margin-top: 13px"
             class="layui-nav-img">
        <p style="white-space:pre;margin-top: 15px;font-weight: bold;margin-left: 20px;font-size: 20px;" >${requestScope.bar.bname}  </p>
        <p style="white-space:pre;margin-top: 17px"><i class="layui-icon layui-icon-username"></i> 在线人数: 40    </p>
        <p style="margin-top: 17px"><i> 帖子 <span class="layui-badge"> 4000 </span></i>
        <p style="white-space:pre;">      </p>
        <li class="layui-icon layui-icon-return layui-icon-hover" id="return" data-target="thumbs" style="font-size: 20px; margin-bottom:auto;margin-left: 570px">返回贴吧</li>
      </div>
      <div class="layui-col-xs7   layui-bg-gray" style=";height: auto;display: flex;margin-bottom: 10px">
        <p style="margin-bottom: 5px;margin-left:5px;font-weight: bold;font-size: 20px">${requestScope.post.ptext}</p>
        <p style="white-space:pre;">      </p>
        <li class="layui-icon layui-icon-rate" id="favoriteIcon" >收藏</li>

<%--        后续动态显示关注人数和评论数量--%>

        <p style="white-space:pre;">  </p>
        <li class="layui-icon layui-icon-reply-fill" lay-on="reply-louzhu" id="replyButton" >回复</li>

      </div>
      <div class="layui-bg-gray"  id="top-tiezi" style="margin-top: auto;width: 850px;height:auto;float: left" >
        <div class="layui-row layui-col-space15">
          <!--                    这里是自己刚发表的评论-->
          <div id="first" class="layui-col-xs12 ">
<%--            <div class="layui-card-header"  style="display: flex">--%>
<%--              <img src="/img/游戏.png" class="layui-nav-img">--%>
<%--              <p class="user";>--%>
<%--                <a href="" class="user-mes1">小马宝莉  </a>--%>
<%--              </p>--%>
<%--            </div>--%>
<%--            <div class="layui-card-body"style="font-size: 18px;">--%>
<%--              <p id="MyComment"></p>--%>
<%--              <div >--%>
<%--                <img src="/img/游戏.png" class="layui-card-img">--%>


<%--              </div>--%>
<%--            </div>--%>
          </div>
          <!--                    这里是别人的评论区-->
          <div class="layui-col-md12 " id="ID-flow-demo-manual">
            <div class="layui-card">

              <div class="layui-cols-xs12 layui-bg-gray"  style="height: 50px">

              </div>

            </div>
          </div>
          <!--                    //下面是评论画板区-->
          <div class="layui-row layui-col-space15" id="commentArea">
            <div class="layui-col-md12 " >
              <div class="layui-card">
                <div class="layui-card-header"  style="display: flex">
                  <img src="/img/游戏.png" class="layui-nav-img" >
                  <p class="user";>
                    <a href="" class="user-mes1 layui-icon-hover">小马宝莉  </a>
                  </p>
                </div>
                <div class="layui-card-body"style="font-size: 18px;">
                    <div class="layui-col-xs2 layui-col-lg-offset5" style="float: left">
                        <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                            <i class="layui-icon layui-icon-upload"></i> 图片上传
                        </button>
                        <div style="width: 132px;" >
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                                <div id="ID-upload-demo-text"></div>
                            </div>
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                                <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                        </div>
                        <hr style="margin: 21px 0;">
                    </div>
                  <div class="layui-form">
                    <label>
                      <textarea id="commentInput" name="" placeholder="评论......" class="layui-textarea"></textarea>
                    </label>
                  </div>
                  <div class="layui-btn-container">

                    <button type="button" class="layui-btn layui-btn-normal" onclick="postComment()">发表评论</button>

                  </div>
                </div>

                <div class="layui-cols-xs12 layui-bg-gray"  style="height: 50px">

                </div>

              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="layui-col-xs3 layui-col-xs-offset1 layui-bg-gray" style="margin-top: auto;height:auto;float: right;margin-left: 0">
        <div class="layui-bg-gray" style="height:auto">
          <div >
            <h3 style="text-align: center" class="mbx">分类</h3>
            <hr>
            <span class="layui-breadcrumb span_css" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index1">首页</a>
                      <a href="" class="a_index1">国际新闻</a>
                    </p>
                    <p class="p_index">
                  <a href="" class="a_index1">亚太地区</a>
                  <a><cite>正文</cite></a>
                    </p>
                </span>
          </div>
          <div>
            <h3 style="text-align: center" class="mbx">门户频道</h3>
            <hr>
            <span class="layui-breadcrumb span_css" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index1">娱乐</a>
                      <a href="" class="a_index1">八卦</a>
                      <a href="" class="a_index1">体育</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index1">搞笑</a>
                      <a href="" class="a_index1">视频</a>
                      <a href="" class="a_index1">游戏</a>
                    </p>
                    <p class="p_index">
                        <a href="" class="a_index1">综艺</a>
                    </p>
                </span>
          </div>

          <!--        贴吧分类-->
          <div style="margin-top: 30px">
            <h6>趣点分类 </h6>  <hr>
          </div>
          <div class="div_index">
            <i class="layui-icon layui-icon-rate-solid"></i> 娱乐明星
            <span class="layui-breadcrumb" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index3">网络红人</a>
                      <a href="" class="a_index3">娱乐明星</a>
                      <a href="" class="a_index3">导演</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index3">时尚人物</a>
                      <a href="" class="a_index3">明星</a>
                      <a href="" class="a_index3">粉丝组织</a>
                    </p>
                </span>
          </div>
          <hr>
          <div class="div_index">
            <img class="img-index" src="/img/体育.png" alt="!"> 体育
            <span class="layui-breadcrumb" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index4">足球</a>
                      <a href="" class="a_index4">篮球</a>
                      <a href="" class="a_index4">乒乓球</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index4">网球</a>
                      <a href="" class="a_index4">舞蹈</a>
                      <a href="" class="a_index4">健身</a>
                    </p>
                </span>
          </div>
          <hr>
          <div class="div_index">
            <img class="img-index" src="/img/游戏.png" alt="!"> 游戏
            <span class="layui-breadcrumb" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index4">单机</a>
                      <a href="" class="a_index4">网游</a>
                      <a href="" class="a_index4">手游</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index4">休闲</a>
                      <a href="" class="a_index4">竞技</a>
                      <a href="" class="a_index4">MOBA</a>
                    </p>
                </span>
          </div>
          <hr>
          <div class="div_index">
            <img class="img-index" src="/img/闲趣.png" alt="!">  闲·趣
            <span class="layui-breadcrumb layui-font-black" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index4">萌宠</a>
                      <a href="" class="a_index4">吐槽</a>
                      <a href="" class="a_index4">重口味</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index4">星座</a>
                      <a href="" class="a_index4">恐怖</a>
                      <a href="" class="a_index4">喵星人</a>
                    </p>
                </span>
          </div>

          <hr>
          <div class="div_index">
            <img class="img-index" src="/img/动漫.png" alt="!">  动漫宅
            <span class="layui-breadcrumb layui-font-black" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index3">国产动漫</a>
                      <a href="" class="a_index3">日本动漫</a>
                      <a href="" class="a_index3">玄幻</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index3">搞笑漫画</a>
                      <a href="" class="a_index3">热血动漫</a>
                      <a href="" class="a_index3">推理</a>
                    </p>
                </span>
          </div>
        </div>


      </div>
    </div>

  </div>

</div>
<script>

    var url;
    var pid = ${requestScope.post.pid};
    var userUrl = '${sessionScope.user.upictureurl}';
    var userName = '${sessionScope.user.uname}';

  document.getElementById('favoriteIcon').addEventListener('click', function() {
    // 切换类
    if (this.classList.contains('layui-icon-rate')) {
      this.classList.remove('layui-icon-rate');
      this.classList.add('layui-icon-rate-solid');
    } else if (this.classList.contains('layui-icon-rate-solid')) {
      this.classList.remove('layui-icon-rate-solid');
      this.classList.add('layui-icon-rate');
    }
  });


  //点击发表评论按钮，展示内容
  function postComment() {
    // 获取输入框的值
    var comment = document.getElementById('commentInput').value;


    // 清除之前的内容（可选）
    document.getElementById('commentInput').value = '';

    // 获取目标元素的顶部位置
    var topNav = document.getElementById('top-tiezi');

    var $ = layui.$;
    var layer = layui.layer;
    $.ajax({
        url: '/comment/addComment',
        data:{
            url: url,
            text: comment,
            pid: pid,
        },
        success: function (res){
            //添加到对应位置
            document.getElementById("first").innerHTML += `<div class="layui-card">
                    <div class="layui-card-header" style="display: flex">
                    <img src="\${userUrl}" class="layui-nav-img">
                    <p class="user">
                    <a href="" class="user-mes1">\${userName}</a>
                    </p>
                    </div>
                    <div class="layui-card-body" style="font-size: 18px;">
                    \${comment}<br>
                    <div>
                    <img src="\${url}" class="layui-card-img">
                    <div style="display: flex">
                    <li class="layui-icon thumbs" id="thumbs\${res}" style="font-size: 30px; margin-bottom:20px;margin-left: 670px" ></li>
                    <li id="\${res}" class="layui-icon layui-icon-reply-fill" style="font-size: 27px; margin-bottom: 20px;margin-left: 40px" lay-on="test-iframe-curl"></li>
                    </div>
                    </div>
                    </div>
                    </div>`;
            // 渲染点赞按钮的初始状态
            var buttonId = "thumbs"+res;
            console.log(buttonId)
            $.ajax({
                url: '/commentLike/selectCommentLikeByUCId?cid=' + res,
                success: function(res) {
                    var button = document.getElementById(buttonId);
                    console.log(res);
                    if (res === 'true') {
                        button.classList.add('layui-icon-heart-fill');
                    } else {
                        button.classList.add('layui-icon-heart');
                    }
                },
                error: function(err) {
                    layer.msg('点赞信息获取失败，请检查网络');
                }
            });

            // 添加点赞按钮的响应事件
            document.getElementById(buttonId).addEventListener('click', function() {
                var button = document.getElementById(buttonId);; // 使用 this 关键字获取被点击的按钮
                if (button.classList.contains('layui-icon-heart-fill')) {
                    // 如果已经被点击过，发送请求取消点赞并更新样式
                    // ... AJAX 请求和样式更新代码 ...
                    $.ajax({
                        url:'/commentLike/deleteCommentLike?cid='+res,
                        success: function(res){
                            button.classList.remove('layui-icon-heart-fill'); // 或者设置为您想要的默认颜色，如 'black'
                            button.classList.add('layui-icon-heart');
                        },
                        error: function(err){
                            layer.msg('取消点赞失败，请检查网络');
                        }
                    });
                } else {
                    // 如果未被点击过，发送请求点赞并更新样式
                    // ... AJAX 请求和样式更新代码 ...
                    $.ajax({
                        url:'/commentLike/insertCommentLike?cid='+res,
                        success: function(res){
                            button.classList.remove('layui-icon-heart'); // 或者设置为您想要的默认颜色，如 'black'
                            button.classList.add('layui-icon-heart-fill');
                        },
                        error: function(err){
                            layer.msg('点赞失败，请检查网络');
                        }
                    });
                }
            });
            if (topNav) {
                // 滚动到目标元素的位置
                window.scrollTo(0, topNav.offsetTop);
            }
        },
        error: function (){

        }
    })



  }
  //回复跳转
  layui.use(function(){
    var $ = layui.$;
    var layer = layui.layer;
    var util = layui.util;
    // 事件
    util.on('lay-on', {

      'test-iframe-curl': function(){
          console.log(this.id)
        layer.open({
          type: 2,
          title: '回复',
          shadeClose: true,
          maxmin: true, //开启最大化最小化按钮
          area: ['700px', '550px'],
          content: '/reply/forwardReplyByCid?cid='+this.id
        });
      }
    })
  });
  layui.use(function(){
    var $ = layui.$;
    var layer = layui.layer;
    var util = layui.util;
    // 事件
    util.on('lay-on', {

      'reply-page': function(data){
        layer.open({
          type: 2,
          title: '评论',
          shadeClose: true,
          maxmin: true, //开启最大化最小化按钮
          area: ['1000px', '550px'],
          content: ''
        });
      }
    })
  });

  //点击回复回到页面下方
  document.getElementById('replyButton').addEventListener('click', function() {
    // 滚动到页面底部
    window.scrollTo(0, document.body.scrollHeight);
    // 或者，如果你想要平滑滚动（需要浏览器支持）
    // window.scroll({
    //     top: document.body.scrollHeight,
    //     behavior: 'smooth'
    // });
  });



  //上传图片方法
  layui.use(function(){
    var upload = layui.upload;
    var layer = layui.layer;
    var element = layui.element;
    var $ = layui.$;

    // 多图片上传
      var uploadInst = upload.render({
          elem: '#ID-upload-demo-btn',
          url: '/upload/uploadImg', // 实际使用时改成您自己的上传接口即可。
          dataType: 'json',
          before: function(obj){
              // 预读本地文件示例，不支持ie8
              obj.preview(function(index, file, result){
                  $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
              });

              element.progress('filter-demo', '0%'); // 进度条复位
              layer.msg('上传中', {icon: 16, time: 0});
          },
          done: function(res){
              // 若上传失败
              if(res.code > 0){
                  layer.msg('上传成功');
                  url = res.data;
              } else
                  layer.msg('上传失败');
              console.log(res.data);
              // 上传成功的一些操作
              // …
          },
          error: function(){
              // 演示失败状态，并实现重传
              var demoText = $('#ID-upload-demo-text');
              demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
              demoText.find('.demo-reload').on('click', function(){
                  uploadInst.upload();
              });
          },
          // 进度条
          progress: function(n, elem, e){
              element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
              if(n === 100){
                  layer.msg('上传完毕', {icon: 1});
              }
          }
      });
  });



  layui.use(function(){
    var flow = layui.flow;
    var $ = layui.$;
    // 流加载实例
    flow.load({
      elem: '#ID-flow-demo-manual', // 流加载容器
      scrollElem: '#ID-flow-demo-manual', // 滚动条所在元素，一般不用填，此处只是演示需要。
      isAuto: false,
      isLazyimg: true,
      done: function(page, next){ // 加载下一页

        //插入数据请求-comment
        let data = [];
        console.log('page'+page);
        $.ajax({
          url: '/comment/getCommentByPage?pid=${requestScope.post.pid}',
          dataType: 'json',
          data: {
            page: page
          },
          success: function(res){
            data = res;
            console.log(res);
            if(res.length===0)
                layer.msg('没有更多了');
          },
          error: function(err){
            layer.msg('请求失败，请检查网络');
          }
        });

        // 模拟插入
        setTimeout(function(){
          var lis = [];
          for(var i = 0; i < data.length; i++){
            lis.push(`<div class="layui-card">
                    <div class="layui-card-header" style="display: flex">
                    <img src="\${data[i].user.upictureurl}" class="layui-nav-img">
                    <p class="user">
                    <a href="" class="user-mes1">\${data[i].user.uname}</a>
                    </p>
                    </div>
                    <div class="layui-card-body" style="font-size: 18px;">
                    \${data[i].ctext}<br>
                    <div>
                    <img src="\${data[i].cimageurl}" class="layui-card-img">
                    <div style="display: flex">
                    <li class="layui-icon thumbs" id="thumbs\${data[i].cid}" style="font-size: 30px; margin-bottom:20px;margin-left: 670px" ></li>
                    <li id="\${data[i].cid}" class="layui-icon layui-icon-reply-fill" style="font-size: 27px; margin-bottom: 20px;margin-left: 40px" lay-on="test-iframe-curl"></li>
                    </div>
                    </div>
                    </div>
                    </div>`);
            console.log(lis);
          }next(lis.join(''), page < 1000); // 假设总页数为 1000

            data.forEach(function(item, index) {
                // 假设每个按钮都有一个唯一的ID，例如 'thumbs-' + item.cid
                var buttonId = 'thumbs' + item.cid;
                var cid = item.cid;

                // 渲染点赞按钮的初始状态
                $.ajax({
                    url: '/commentLike/selectCommentLikeByUCId?cid=' + item.cid,
                    success: function(res) {
                        var button = document.getElementById(buttonId);
                        console.log(res);
                        if (res === 'true') {
                            button.classList.add('layui-icon-heart-fill');
                        } else {
                            button.classList.add('layui-icon-heart');
                        }
                    },
                    error: function(err) {
                        layer.msg('点赞信息获取失败，请检查网络');
                    }
                });

                // 添加点赞按钮的响应事件
                document.getElementById(buttonId).addEventListener('click', function() {
                    var button = document.getElementById(buttonId);; // 使用 this 关键字获取被点击的按钮
                    if (button.classList.contains('layui-icon-heart-fill')) {
                        // 如果已经被点击过，发送请求取消点赞并更新样式
                        // ... AJAX 请求和样式更新代码 ...
                        $.ajax({
                            url:'/commentLike/deleteCommentLike?cid='+cid,
                            success: function(res){
                                button.classList.remove('layui-icon-heart-fill'); // 或者设置为您想要的默认颜色，如 'black'
                                button.classList.add('layui-icon-heart');
                            },
                            error: function(err){
                                layer.msg('取消点赞失败，请检查网络');
                            }
                        });
                    } else {
                        // 如果未被点击过，发送请求点赞并更新样式
                        // ... AJAX 请求和样式更新代码 ...
                        $.ajax({
                            url:'/commentLike/insertCommentLike?cid='+cid,
                            success: function(res){
                                button.classList.remove('layui-icon-heart'); // 或者设置为您想要的默认颜色，如 'black'
                                button.classList.add('layui-icon-heart-fill');
                            },
                            error: function(err){
                                layer.msg('点赞失败，请检查网络');
                            }
                        });
                    }
                });
            });

        }, 520);
      }
    });
  });
  layui.use(['jquery'], function(){
    var $ = layui.jquery;

    // 绑定点击事件
    $('#return').on('click', function(){
      window.location.href = '/bar/forwardBarById?bid='+${requestScope.bar.bid}; // 跳转到index.htm页面
    });
  });



</script>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<style>
  /* styles.css */
  .nav-profile {
    display: flex;
    align-items: center;
  }

  .nav-profile-img {
    position: relative;
    margin-right: 10px;
  }
  a{
    margin-left: 10px;
  }
  .mbx{
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .span_css{
    margin-top: 20px
  }
  /*标签导航*/
  .a_index1{
    margin-left: 20px;
    margin-top: 20px;
    /*text-decoration: underline;*/
  }
  .a_index3{
    font-size: 13px;
    width: 5em;
    /*margin-left: 20px;*/
    margin-top: 20px;
  }
  a:hover{
    text-decoration: underline;
  }
  .a_index4{
    font-size: 15px;
    width: 4em;
    margin-left: 10px;
    margin-top: 20px;
    text-align: center;
  }
  .p_index{
    color: black;
    margin-top: 10px;
  }
  .div_index{
    padding: 10px;
  }
  .p_index_color {
    background-color: #dbfbf0; /* 鼠标移入时的背景颜色 */
  }
  /*标签图片*/
  .img-index{
    width: 20px;
    height: 20px;
  }
  hr{
    padding: 0;
    margin: 0;
  }
  .logo_img{
    width: 40px;
    height: 30px;
  }
  h3{
    margin-top: 0;
  }
  .layui-card-img { /* 使用新的类名或确保选择器能覆盖现有样式 */
    width: 200px; /* 假设我们想要将图片宽度设置为200px，您可以根据需要调整 */
    height: auto; /* 保持图片的高宽比 */
    border-radius: 0; /* 移除边框圆角 */
    border: none; /* 如果图片有边框，也移除它 */
    /* 可以添加其他图片样式，比如margin, padding等 */
  }
  .layui-icon-hover {
    color: blue; /* 或者其他您想要的颜色 */
  }
  .layui-btn-small {
    padding: 1px 10px;
    font-size: 15px;
  }
</style>

</body>
</html>